<!-- 豫章行代金券支付 -->
<template>
  <div id="voucherPay">
    <van-popup v-model="show" position="bottom" :style="{ maxHeight: '70%'}" round :close-on-click-overlay="false">
      <van-nav-bar title="代金券" right-text="关闭" @click-right="onClickRight" />
      <div class="voucher-main">
        <van-radio-group v-model="radio" @change="onChangeRadio">
          <div
            class="voucher-item flex-a-c"
            v-for="item in list"
            :key="item.id"
            @click="onClickRadio(item, item.coupons.useParams)"
            :class="{ 'color-disabled': Number(JSON.parse(item.coupons.useParams).balance) < sum }"
          >
            <div class="voucher-item-l flex-a-c">
              <div class="flex-a-c" style="align-items: baseline; margin-bottom: 6px; width: 100%;">
                代金券<small style="font-size: 8px; color: #252525;">￥</small><small style="color: #252525;">{{ JSON.parse(item.coupons.useParams).cashTotal }}</small>
              </div>
              <div class="flex-a-c" style="align-items: baseline; width: 100%;">
                剩余值<small style="font-size: 8px; color: #f51d1d;">￥</small><small style="color: #f51d1d;">{{ JSON.parse(item.coupons.useParams).balance }}</small>
              </div>
            </div>
            <div class="voucher-item-c">
              <div class="circle" style="top: -19px;"></div>
              <div class="circle" style="bottom: -19px;"></div>
              <div class="line"></div>
            </div>
            <div class="voucher-item-r flex-j-sb">
              <div class="s-12 clamp-2" style="color: #252525;">ID:{{ item.id }} {{ item.couponsName }}</div>
              <div class="s-10">类型：{{ item.couponsType == "4" ? "春节券" : "" }}</div>
              <div class="s-10">有效期：{{ item.startTime }} 至 {{ item.endTime }}</div>
            </div>
            <van-radio :name="item" ref="checkboxes" checked-color="#ee0a24" :disabled="Number(JSON.parse(item.coupons.useParams).balance) < sum" />
          </div>
          <div v-if="this.$store.state.isloadding && this.fun.isTextEmpty(list)" style="margin-top: 40px; color: #999;">正在加载中...</div>
          <div v-if="!this.$store.state.isloadding && this.fun.isTextEmpty(list)" style="margin-top: 40px; color: #999; font-weight: bold;">暂无可使用的代金券 ~</div>
        </van-radio-group>
      </div>
      <div style="" class="flex-a-c voucher-bottom">
        <div class="flex">
          已选{{ radio ? "1" : "0" }}张<template v-if="radio"
            >，预计可减
            <div style="color: #f51d1d;"><small style="font-size: 10px;">￥</small>{{ paySum }}</div></template
          >
        </div>
        <van-button round type="danger" size="small" style="width: 64px; margin-left: 10px;" @click="toPay">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: this.value,
      // show: true,
      radio: 0,
      list: [],
      paySum: null
    };
  },
  props: {
    value: {
      type: Boolean
    },
    sum: {
      type: [String, Number],
      value: 0
    },
    oid: {
      type: [String, Number], //订单id
      value: 0
    }
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        this.radio = 0;
        this.paySum = null;
        this.getData();
      }
    }
  },
  components: {},
  computed: {},
  // mounted() {
  //   this.getData();
  // },
  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.code-science-pay.frontend.coupon-member", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.list = data || [];
    },
    onClickRadio(item, num) {
      if (Number(JSON.parse(num).balance) < this.sum) {
        return;
      }
      this.radio = item;
    },
    onClickRight() {
      this.show = false;
      this.$emit("input", false);
    },
    onChangeRadio() {
      let _sum = Number(this.sum);
      let _balance = Number(JSON.parse(this.radio.coupons.useParams).balance);
      this.paySum = _balance > _sum ? _sum : "---";
    },
    async toPay() {
      if (!this.radio) {
        this.onClickRight();//没有选择过，点击确认关闭弹窗
        return;
      }
      let { result, msg, data } = await $http.get("order.merge-pay.codeSciencePayYu", { order_pay_id: this.oid, couponsId: this.radio.id }, ".");
      if (result == 0) return this.$toast(msg);
      this.$parent.checkoutConsumePacket();//调用父组件的mixin方法checkoutConsumePacket
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#voucherPay {
  .van-popup,
  .van-nav-bar {
    background: #f2f2f2;
  }

  .voucher-main {
    padding: 10px;
    height: 17rem;
    overflow: scroll;
  }

  .voucher-item {
    margin-bottom: 12px;
    display: flex;
  }

  .van-checkbox {
    position: relative;
  }

  .voucher-item {
    text-align: left;
    padding: 10px;
    font-size: 10px;
    height: 5.875rem;
    background: #fff;
    color: #666;
    border-radius: 5px;

    .voucher-item-l {
      width: 6.25rem;
      flex-direction: column;

      small {
        font-size: 0.8125rem;
        font-weight: bold;
      }
    }

    .voucher-item-r {
      flex: 1;
    }

    .voucher-item-c {
      padding: 5px 12px;
      position: relative;

      .line {
        width: 1px;
        height: 59px;
        border-right: 1px dashed #bcbcbc;
      }

      .circle {
        width: 15px;
        height: 15px;
        background: #f2f2f2;
        border-radius: 50%;
        left: 5px;
        position: absolute;
      }
    }

    .voucher-item-r {
      flex-direction: column;
      height: 100%;
    }
  }

  .s-12 {
    font-size: 0.75rem;
  }

  .s-10 {
    font-size: 0.625rem;
  }

  .clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    cursor: pointer;
    line-height: 13px;
  }

  .voucher-bottom {
    height: 50px;
    background: #fff;
    font-size: 0.9375rem;
    justify-content: flex-end;
    padding: 0.9375rem;
  }

  .color-disabled * {
    color: rgba($color: #252525, $alpha: 0.4) !important;
  }
}
</style>
